<%@ page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>

<spring:url value="/resources/js-framework/datatables/jquery.dataTables.css" var="jquery_dataTables_css"/>
<spring:url value="/resources/js-framework/datatables/jquery.dataTables.min.js" var="jquery_dataTables_min_js"/>
<spring:url value="/resources/js-framework/populate/jquery.populate.pack.js" var="jquery_populate_pack_js"/>

<!-- DataTables CSS -->
<link href="${jquery_dataTables_css}" media="screen" rel="stylesheet" type="text/css"/>
<!-- DataTables -->
<script src="${jquery_dataTables_min_js}" type="text/javascript">
        <!-- required for FF3 and Opera -->
</script>

<!-- Populate -->
<script src="${jquery_populate_pack_js}" type="text/javascript">
        <!-- required for FF3 and Opera -->
</script>

<script>
		// Wait until the DOM has loaded before querying the document
		$(document).ready(function(){
		$(".tab_div").hide();
		$('ul.tabs a').click(function () {
			$(".tab_div").hide().filter(this.hash).show();
			$("ul.tabs a").removeClass('active');
			$(this).addClass('active');
			return false;
		}).filter(':first').click();
		
		$('#addNew, #update').click(function(){
			$("#updateRecords").reset();
			displayMaintainance();
		});
  		$('a[href$="tab2"]').click(function(){
			$("#updateRecords").reset();
			
		});
	});
	
		function openMaintainance(id){
			getTimehrsById(id);
			displayMaintainance();
		}
		
		function getTimehrsById(id){
			$.getJSON("timehrses/"+id,{}, showTimehrs);
		}
		
		function showTimehrs(data){
			$("#updateRecords").populate(data, {debug:false, resetForm:true});
		}
		
		function displayMaintainance(){
			$("ul.tabs a").removeClass('active');
			$(".tab_div").hide().next("#tab2".hash).show();
			$('a[href$="tab2"]').addClass('active');
		}
		

</script>


<script type="text/javascript">
$(document).ready(function(){
	$('#addNew').live("click", function(){
		tempId=$("table.addNewRow_thm tbody").find("tr").length;
		var tempID=tempId+1;
				
		var newRow = "<tr title='rowData'><td align='center'>YI1070</td><td align='center' valign='middle'><select name='select3' class='large'><option selected='selected'>Select</option><option>UI Specialist</option><option>Marketing</option><option>HCM</option><option>TAC</option></select></td><td align='center' valign='middle'><input type='text' value='' name='textfield8' /></td><td align='center' valign='middle'><select name='select5' class='large'><option selected='selected'>Select</option><option>JD</option><option>NCO</option><option>PRAXIS</option></select></td><td align='center' valign='middle'><select name='select6' class='large'><option selected='selected'>Select</option><option>Bench</option><option>Project</option><option> Project –Partial</option><option>Shadow </option></select></td><td align='center' valign='middle'><input name='textfield9' type='text' value='' /></td><td align='center' valign='middle'><input name='textfield10' type='text' value=''  /></td><td align='center' valign='middle'><input type='text' value='' name='textfield11' /></td><td align='center' valign='middle'><input name='textfield12' type='text' value='' /></td></tr>";
		
		$(".addNewRow_thm tbody").append(newRow);
		
		$("table.addNewRow_thm tbody").find("tr[title=rowData]").each(function(index){
		var temp=("row"+(index+1));
		var tempNumber=index+1;
		if(tempNumber%2==0){
			$(this).attr("class","even");
		}else{
			$(this).attr("class","odd");
		}
		$(this).attr("id",temp);
	});
	});
});
</script>


                <div class="mid_section">
                <!--right section-->
                    <div class="botMargin">
                        <h1>Time Hours Entry</h1>
                  </div>
                                  <div class="tab_seaction">
                    <ul class='tabs'>
                        <li><a href='#tab1'>List</a></li>
                        <li><a href='#tab2'>Maitainance</a></li>
                    </ul>
                         <div id='tab1' class="tab_div">
                         	<!--<div class="search_filter">
                            	<div class="search_lbl">Search :</div>
                                <div class="search_dd">
                                	<select name="">
                                    	<option>E-mail ID</option>
                                        <option>Employee Name</option>
                                    </select>
                                </div>
                                <div class="search_input">
                                	<input name="" type="text" />
                                </div>
                                <div class="search_go">
                                	<input name="" type="button" value="Search" />
                                </div>
                            </div>-->
                            
                            <div class="search_filter_outer">
                  				<div class="search_filter">
                            	<form id="frmSearch" name="frmSearch" method="post" action="" class="frmSearch"> 
                                	<div>
                                    	<select name="">
                                    <option value="" selected="selected">Select</option>
                                            <option>E-mail ID</option>
                                            <option>Employee Name</option>
                                    	</select>
                                        <input name="" type="text" />
                                        <a href="#" class="blue_link"><img src="resources/images/search_button.png" width="20" height="19" align="absmiddle"/> </a>
                                    </div>
                                </form>
                                <div class="btnIcon">
                                	
                                    <a href="#"  class="blue_link" id="update" >
                                   	<img src="resources/images/edit.png" width="16" height="22" />  Update</a>
            </div>
           						<div class="clear"></div>
                            </div>
                            </div>
                            
                            <div class="tbl">
                            <table width="100%"  class="tablesorter" cellspacing="1" cellpadding="2">
                              <thead>
                                <tr>
                                  <th width="8%" align="center" valign="middle">Employee ID</th>
                                  <th width="10%" align="center" valign="middle">Employee Name</th>
                                  <th width="15%" align="center" valign="middle">Weekly Ending Date</th>
                                  <th width="6%" align="center" valign="middle">Designation </th>
                                  <th width="5%" align="center" valign="middle">Grade </th>
                                  <th width="10%" align="center" valign="middle">Planned Capacity</th>
                                  <th width="10%" align="center" valign="middle">Actual Capacity</th>
                                  <th width="13%" align="center" valign="middle">Total Planned Hours</th>
                                  <th width="12%" align="center" valign="middle">Total Reported Hours </th>
                                  <th width="10%" align="center" valign="middle">Total Billed Hours </th>
                                </tr>
                              </thead>
                              <tbody>
                              <c:forEach var="timehrses" items="${timehrses}">
                                <tr class="even">
                                  <td align="center" valign="middle"><a href="#" id="timehrsesid" onclick="openMaintainance(${timehrses.id});">${timehrses.id}</a></td>
                                  <td align="center" valign="middle">${timehrses.resourceId.employeeName}</td>
                                  <td align="center" valign="middle">${timehrses.weekEndingDate}</td>
                                  <td align="center" valign="middle">${timehrses.designationId.designationName}</td>
                                  <td align="center" valign="middle">${timehrses.gradeId.grade}</td>
                                  <td align="center" valign="middle">${timehrses.resourceId.plannedCapacity}</td>
                                  <td align="center" valign="middle">${timehrses.resourceId.actualCapacity}</td>
                                  <td align="center" valign="middle"> ${timehrses.plannedHrs}</td>
                                  <td align="center" valign="middle"> ${timehrses.reportedHrs}</td>
                                  <td align="center" valign="middle">${timehrses.billedHrs}</td>
                                </tr>
                               </c:forEach>
                              </tbody>
                              
                              
                            </table>
                          </div>
                          <div class="clear"></div>
                         </div>
                         <div id='tab2' class="tab_div">
                         <div class="search_filter">
                         	<div align="right">
                            <a href="#" class="blue_link" id="addNew" >
                                    	<img src="resources/images/addUser.gif" width="16" height="22" />  Add New
                              </a> &nbsp; &nbsp;
                       	    <a href="#" class="blue_link" id="save" onclick="document.getElementById('updateRecords').submit();">
                       	    	<img src="resources/images/save.png" name="save" width="16" height="22"  /> Save
                                </a>
                            </div>
                            </div>
                           <div class="tbl">
                           <form action="timehrses" method="post" id="updateRecords">
                            <table width="100%"  class="tablesorter addNewRow_thm" cellspacing="1" cellpadding="2">
                              <thead>
                                <tr>
                                  <th width="10%" align="center" valign="middle">Employee ID</th>
                                  <th width="14%" align="center" valign="middle">Designation</th>
                                  <th width="10%" align="center" valign="middle">Week Ending Date</th>
                                  <th width="13%" align="center" valign="middle">Project Name</th>
                                  <th width="13%" align="center" valign="middle">Weekly Allocation</th>
                                  <th width="10%" align="center" valign="middle">Planned Hours</th>
                                  <th width="10%" align="center" valign="middle">Reported Hours</th>
                                  <th width="10%" align="center" valign="middle">Billed Hours</th>
                                  <th width="10%" align="center" valign="middle">Remarks</th>
                                </tr>
                              </thead>
                              <tbody>
                                <tr title="rowData" class="odd">
                                  <td align="center">
                               	  <label id="projectId"></label></td>
                                  <td align="center" valign="middle"><label id="designationId.designationName"></label></td>
                                  <td align="center" valign="middle"><label id="weekEndingDate"></label></td>
                                  <td align="center" valign="middle"><label id="projectId[projectName]"></label></td>
                                  <td align="center" valign="middle"><label id=""></label></td>
                                  <td align="center" valign="middle"><label id="plannedHrs"></label></td>
                                  <td align="center" valign="middle"><label id="reportedHrs"></label></td>
                                  <td align="center" valign="middle"><label id="billedHrs"></label></td>
                                  <td align="center" valign="middle"><label id="remarks"></label></td>
                                </tr>
                                
                              </tbody>
                              
                            </table>
                            </form>
                          </div>
                           <div class="clear"></div>
                      </div>
            
                    </div>
                <!--right section-->
                </div>
 